@import '../variables/default.scss';
@import '../mixins/index.scss';

@mixin button-size($height, $padding, $font-size, $border-radius) {
  height: $height;
  padding: $padding;
  font-size: $font-size;
  border-radius: $border-radius;
}

.at-button {
  position: relative;
  display: flex;
  justify-content: center;
  margin: $at-button-margin;
  padding: 0 $spacing-h-xl;
  height: $at-button-height;
  color: $at-button-text-color;
  font-size: $font-size-lg;
  line-height: $at-button-height;
  text-align: center;
  border-radius: $border-radius-md;
  border: 2px solid $at-button-border-color;
  box-sizing: border-box;
  @include line();

  &:active {
    opacity: $opacity-active;
  }

  /* elements */
  &__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 20px 0 20px;
  }

  &__text {
    display: inline;
  }

  &__wxbutton {
    position: absolute;
    padding: 0;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    background-color: transparent;
    opacity: 0;
    z-index: 1;

    &::after {
      display: none;
    }
  }

  /* modifiers */
  &--active {
    opacity: $opacity-active;
  }

  &--disabled {
    opacity: $opacity-disabled;

    &:active {
      opacity: $opacity-disabled;
    }
  }

  &--primary {
    color: $color-text-base-inverse;
    border: 2px solid $at-button-border-color-primary;
    background: $at-button-bg;
  }

  &--dashed {
    background-color: $color-white;
    border-style: dashed;
  }

  &--font {
    border: none;
  }

  &--danger {
    color: $color-text-base-inverse;
    background-color: $color-error;
  }

  &--small {
    padding: 0 $spacing-h-md;
    width: auto;
    height: $at-button-height-sm;
    font-size: $font-size-sm;
    line-height: $at-button-height-sm;
  }

  &--image {
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    border: 0;

    &:active {
      opacity: inherit;
    }
  }

  &--full {
    width: 100%;
    max-width: 100%;
    border-radius: 0;
    border-left: none;
    border-right: none;
    margin: 0 auto;
  }

  // 微信小程序issue: https://github.com/nervjs/taro-ui/issues/534
  &--inline {
    display: inline-flex;
    padding: 0 $spacing-h-lg;
    align-items: center;
    justify-content: center;
    text-align: center;

    .at-button__icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin: 0;
    }
  }

  &--circle-h5 {
    width: $at-button-height;
    @include button-size($at-button-height, 0, $font-size-lg + 12px, 50%);

    &.at-button--small {
      width: $at-button-height-sm;
      @include button-size($at-button-height-sm, 0, $font-size-sm, 50%);
    }
  }

  &--circle {
    width: $at-button-height;
    @include button-size($at-button-height, 0 0 8px 0, $font-size-lg + 12px, 50%);

    &.at-button--small {
      width: $at-button-height-sm;
      @include button-size($at-button-height-sm, 0 0 4px 0, $font-size-sm, 50%);
    }
  }

  &--round {
    opacity: 1;
    @include button-size(
      $at-button-height,
      0 $at-button-height/2,
      $font-size-lg + 2px,
      $at-button-height
    );

    &.at-button--small {
      @include button-size(
        $at-button-height-sm,
        0 $at-button-height-sm/2,
        $font-size-sm,
        $at-button-height-sm
      );
    }
  }
}
